<template>
	<!-- 商品管理 -->
	<view class="shopmanagement_wp">
		<view class="s_nav">
			<view class="s_nav_item" :class="{'s_nav_active':active==1}" @click="navTap(1)">审核中</view>
			<view class="s_nav_item" :class="{'s_nav_active':active==2}" @click="navTap(2)">在售中</view>
			<view class="s_nav_item" :class="{'s_nav_active':active==3}" @click="navTap(3)">已售罄</view>
			<view class="s_nav_item" :class="{'s_nav_active':active==4}" @click="navTap(4)">已下架</view>
		</view>
		
		<view class="s_list">
			<view class="s_item" v-for="(item,index) in list" :key="item.id">
				<view class="s_i_head">
					<image :src="item.thumb" mode=""></image>
					<view class="s_i_title">
						<view class="s_i_name">{{item.title}}</view>
						<view class="s_i_money"><text>{{item.agentprice}}</text><text>元</text>
							<text>供货价：￥{{item.buyprice}}</text>
						</view>
						<view>库存{{item.total}}件</view>
					</view>
				</view>
				<view class="s_i_buttons">
					<view class="s_edit" @click="$navTo('../business/releasegoods?id='+item.id)">修改</view>
					<view class="s_xiajia" v-if="active==4" @click="goodsUp(item.id,index)">上架</view>
					<view class="s_xiajia" v-else-if="active==2||active==3" @click="down(item.id,index)">下架</view>
				</view>
			</view>
		</view>
		
		<view class="s_buttons" @click="$navTo('/pages/business/releasegoods')">发布商品</view>
		
		<view class="loading_empty">
			<image v-if="isloading" src="../../static/business/loading.gif" mode=""></image>
			<text v-if="isempty">到底了~</text>
		</view>
	</view>
</template>

<script>
export default{
	data() {
		return {
			active: 1,
			
			page:0,
			list:[],
			
			
			isloading:false,
			isempty:false,
		}
	},
	onReachBottom() {
		this.getlist();
	},
	onLoad() {
		this.getlist();
	},
	onBackPress() {
		this.$navTo('../individualism/user');
		return true;
	},
	methods:{
		goodsUp(id,i){
			var that=this;
			uni.showModal({
				title:"提示",
				content:'上架商品?',
				success(e) {
					if(e.confirm){
						that.$axios('goods/goodsUp','POST','supplier',{id}).then(res=>{
							if(res.data.code==200){
								that.$api.msg("上架成功!");
								that.list.splice(i,1);
							}
						})
					}
				}
			})
		},
		down(id,i){
			var that=this;
			uni.showModal({
				title:"提示",
				content:'下架商品?',
				success(e) {
					if(e.confirm){
						that.$axios('goods/goodsDown','POST','supplier',{id}).then(res=>{
							if(res.data.code==200){
								that.$api.msg("下架成功");
								that.list.splice(i,1);
							}
						})
					}
				}
			})
		},
		getlist(){
			this.page+=1;
			this.isloading=true;
			this.isempty=false;
			this.$axios('goods/goodsList','POST','supplier',{status:this.active,page:this.page}).then(res=>{
				this.isloading=false;
				if(res.data.code==200){
					this.list=this.list.concat(res.data.data);
					this.isempty=res.data.data.length<=0?true:false;
				}
			})
		},
		navTap(e){
			if(e==this.active) return ;
			this.active=e;
			this.page=0;
			this.list=[];
			this.getlist();
		}
	}
}
</script>

<style lang="scss">
page{
	background: #f2f2f2;
	color: $font-color-dark;
	padding-bottom: 130upx;
}
.s_nav{
	position: fixed;
	background-color: #fff;
	display: flex;
	align-items: center;
	font-size: $font-base;
	width: 100%;
	z-index: 10;
}
.s_nav_item{
	flex: 1;
	line-height: 60upx;
	padding: 20upx 0;
	text-align: center;
	position: relative;
}
.s_nav_active:after{
	content: '';
	position: absolute;
	bottom: 20upx;
	left: 50%;
	transform: translateX(-50%);
	border-bottom: 3px $base-color solid;
	width: 40upx;
}
.s_list{
	overflow: hidden;
	padding-top: 100upx;
}
.s_item{
	background-color: #fff;
	border-radius: 10upx;
	margin: 20upx 20upx 0;
	padding: 20upx;
}
.s_i_head{
	display: flex;
}
.s_i_head image{
	border-radius: 10upx;
	height: 135upx;
	width: 135upx;
}
.s_i_title{
	padding-left: 20upx;
	line-height: 45upx;
	width: calc(100% - 135upx);
}
.s_i_name{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.s_i_money{
	color: $base-color;
}
.s_i_money text:nth-of-type(2){
	font-size: 20upx;
	margin-right: 50upx;
}
.s_i_money text:nth-of-type(3){
	font-size: $font-sm;
	color: $font-color-light;
}
.s_i_buttons{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 20upx;
	letter-spacing: 2px;
}
.s_i_buttons view{
	border: 1px hsl(0,0%,87%) solid;
	border-radius: 40upx;
	line-height: 60upx;
	text-align: center;
	width: 150upx;
}
.s_edit{
	margin-right: 30upx;
}
.s_xiajia{
	background: linear-gradient(to right, #ff7101, #f03201);
	color: #fff;
}
.s_buttons{
	background-color: $base-color;
	border-radius: 20upx;
	color: #fff;
	line-height: 70upx;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 30upx;
	text-align: center;
	width: 94%;
}
.loading_empty{
	color: #0062CC;
	text-align: center;
	padding: 20upx;
}
.loading_empty image{
	height: 60upx;
	width: 60upx;
}
</style>
